<template>
    <div class="publishtheme">
        <p>创建新圈子 <span @click="fun" style="cursor: pointer">返回圈子列表</span></p>
        <div class="top">
            <div class="top-left">
                <p>更换圈子LOGO</p>
                <div class="top-left-img">
                    <div>
                        <img  :src="images" >
                    </div>
                    <Upload style="width: 104px;float: left;margin-right: 20px"
                            action="http://www.hfbb.com/api/common/upload"
                            :on-success="succe"


                    >
                        <Button>上传本地照片</Button>
                    </Upload>
                    <Button>确认圈子头像</Button>
                </div>
            </div>
            <div class="top-right">
               <span>圈子名称：</span>
                <Input v-model="value" placeholder="例:眼部整形圈" style="width: 190px" :maxlength="maxlength" @on-blur="blur"/>
                <span style="margin-left: 10px;color: #ff5b79">限10个字符</span>
                <div class="message" v-if="show == true">
                    <span>该名称已被使用，请换个名称创建</span>
                    <Button style="margin-left: 35px" size="small">查看该圈信息</Button>
                </div>
                <div class="message2">
                    <span>基础设置：</span>
                    <Checkbox v-model="check">勾选开启加入圈子,人工审核机制</Checkbox>
                  <div style="padding:10px 0 10px 65px"><Checkbox v-model="check1">勾选开启发布帖子,人工审核机制</Checkbox></div>
                  <div style="padding:0 0 10px 65px"><Checkbox v-model="check2">勾选开启评论回复,人工审核机制</Checkbox></div>
                    <div><span>仅圈主可见</span><Checkbox v-model="check3">勾选强制会员群昵称未证实的实名</Checkbox></div>
                </div>
                <div class="message3">
                    <span>创建者信息</span>
                    <span style="float: right;color: #FE5371">我要实名认证</span>
                   <div style="margin: 10px 0">
                       <span>认证实名：刘大壮</span>
                       <span style="margin-left: 90px">IP地址：192.168.0.1</span>
                   </div>
                    <div style="margin:0 0 10px 0"><span>实名地址：江苏省徐州市铜山区小夏区5单元1001</span></div>
                    <div style="margin-bottom: 5px"><span>注册昵称：努力奋斗的大壮</span><span>(默认为圈主)</span></div>
                    <div style="color: #FE5371"><Icon type="ios-alert-outline" style="font-size: 15px" /><span>系统未读到您的实名信息，禁止创建新圈子</span></div>
                </div>
            </div>
        </div>
        <div class="middle">
            <Checkbox v-model="check4">勾选开启敏感词过滤</Checkbox>
            <div class="mid-content">
                <ul>
                    <li>
                        <span>敏感设置：<input v-model="sensitive" placeholder="银行卡、汇款"  style="width: 300px;height: 20px;" /></span>
                    </li>
                    <li>
                        <span>圈子主页显示设置：<span>贴子每页显示行数</span><input v-model="pagenum" style="width: 30px;height: 20px" />;置顶显示行数<input v-model="topnum" style="width: 30px;height: 20px" /></span>
                    </li>
                    <li>
                        <span>帖子设置：<span>是否允许使用积分看贴功能</span>
                            <RadioGroup v-model="isji">
                                <Radio label="1">是</Radio>
                                <Radio label="2">否</Radio>
                            </RadioGroup>
                            <span>；已发布的帖子是否允许编辑</span>
                            <RadioGroup v-model="isedit">
                                <Radio label="1">是</Radio>
                                <Radio label="2">否</Radio>
                            </RadioGroup>
                        </span>
                    </li>
                    <li>
                        <span>已发布的帖子是否允许删除</span>
                        <RadioGroup v-model="isdel">
                            <Radio label="1">是</Radio>
                            <Radio label="2">否</Radio>
                        </RadioGroup>
                        <span>；通过审核的帖子编辑后是否需要重新审核</span>
                        <RadioGroup v-model="isnewedit">
                            <Radio label="1">是</Radio>
                            <Radio label="2">否</Radio>
                        </RadioGroup>
                    </li>
                    <li>
                        <span>副圈主对外是否开放申请</span>
                        <RadioGroup v-model="isfuzhu">
                            <Radio label="1">是</Radio>
                            <Radio label="2">否</Radio>
                        </RadioGroup>
                    </li>
                    <li>
                        <span>圈子内容的帖子是否允许转载分享</span>
                        <RadioGroup v-model="iszhuan">
                            <Radio label="1">是</Radio>
                            <Radio label="2">否</Radio>
                        </RadioGroup>
                    </li>
                    <li>
                        <span>是否限制同一IP地址注册的用户只能加入一个</span>
                        <RadioGroup v-model="isip">
                            <Radio label="1">是</Radio>
                            <Radio label="2">否</Radio>
                        </RadioGroup>
                    </li>
                    <li>
                        <span>新加入的会员通过审核后 <input type="text" style="width: 30px;height: 20px" v-model="fabutime"  >分钟后才能发帖</span>
                    </li>
                    <li>
                        <Checkbox v-model="check5">勾选禁止非圈主成员发言</Checkbox>
                        <span>；是否可以评论</span>
                        <RadioGroup v-model="ispinglun">
                            <Radio label="1">是</Radio>
                            <Radio label="2">否</Radio>
                        </RadioGroup>
                        <span>；是否可以回复</span>
                        <RadioGroup v-model="isback">
                            <Radio label="1">是</Radio>
                            <Radio label="2">否</Radio>
                        </RadioGroup>
                    </li>
                </ul>
            </div>
        </div>
        <div class="sub">
            <Button type="error" class="btn"  @click="instance('success')">提交审核</Button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "publishtheme",
        data () {
            return {
                check:false,
                check1: false,
                check2: false,
                check3: false,
                check4: false,
                check5: false,
                value:'',
                show:false,
                maxlength:10,
                images:require('../Group/img/circleLogo.png'),
                images1:'',
                isshenhe:'',
                isfabu:'',
                isping:'',
                istruename:'',
                issen:'',
                sensitive:'',
                topnum:'',
                pagenum:'',
                isji:'',
                isedit:'',
                isdel:'',
                isnewedit:'',
                isfuzhu:'',
                fabutime:'',
                isfayan:'',
                ispinglun:'',
                isback:'',
                isip:'',
                iszhuan:''

            }
        },
        methods: {
            instance (type) {
                this.isshenhe = this.check ? 2:1;
                this.isfabu = this.check1 ? 2:1;
                this.isping = this.check2 ? 2:1;
                this.istruename = this.check3 ? 2:1;
                this.issen = this.check4 ? 1:2;
                this.isfayan = this.check5 ? 1:2;
                let _this =this
                this.$post('/api/circle/EstablishCircle',
                    {
                        token:_this.$token,
                        name:_this.value,
                        isshenhe:_this.isshenhe,
                        isfabu:_this.isfabu,
                        isping:_this.isping,
                        istruename:_this.istruename,
                        image:_this.images1,
                        issen:_this.issen,
                        sensitive:_this.sensitive,
                        pagenum:_this.pagenum,
                        topnum:_this.topnum,
                        isji:_this.isji,
                        isedit:_this.isedit,
                        isdel:_this.isdel,
                        isnewedit:_this.isnewedit,
                        isfuzhu:_this.isfuzhu,
                        iszhuan:_this.iszhuan,
                        fabutime:_this.fabutime,
                        isfayan:_this.isfayan,
                        ispinglun:_this.ispinglun,
                        isback:_this.isback,
                        isip:_this.isip
                    }, function (res) {
                         console.log(res)
                        const title = '提示';
                        const content = '<p>您所建的圈子已经成功提交审核，</p><p>请等待管理员的审核结果！</p>';
                        switch (type) {
                            case 'success':
                                _this.$Modal.success({
                                    title: title,
                                    content: content
                                });
                                break;
                        }
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })

            },
            succe (response) {
                this.images = this.$Url+response.data.url
                this.images1 = response.data.url
                 console.log(response.data.url)
            },
            blur () {
                let _this =this
                this.$post('/api/Diary/editDiary',
                    {
                        name:_this.value,
                    }, function (res) {
                        console.log(res)
                        _this.show = true
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            },
            fun () {
                this.$router.push({path:'/my/mygroup/list'})
            }

        }
    }
</script>

<style  lang="less">
    @import "../../../style/style";

    .publishtheme{
        border: 1px solid #e0e0e0;
        padding: 20px !important;
         >:first-child{
             font-size: 18px;
             color: @theme-color-dark;
             border-bottom: 1px solid @theme-color-dark;
             padding-bottom: 5px;
             span{
                 background-color: @theme-color-dark;
                 color: white;
                 padding: 5px 10px;
                 font-size: 14px;
                 border-radius: 4px;
                 border-bottom: 2px solid red;
                 float: right;
                 margin-top: -5px;
             }
         }
        .top{
            width: 100%;
            overflow: hidden;
            border-bottom: 1px solid #ff5b79;
        }
        .top-left{
            width: 260px;
            height: 330px;
            border: 1px solid #999999;
            margin: 20px 0;
            float: left;
        }
        .top-left p{
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
            background-color: #ff5371;
            color: #fff;
        }
        .top-left-img{
            padding: 10px;
            img{
                width: 236px;
                height: 240px;
            }
            .ivu-upload-list{
                display: none;
            }
        }
        .top-right{
            float: left;
            margin: 20px 0 0 30px;
        }
        .message{
            margin: 10px 0;
            span{
                color: #ff5b79;
            }
        }
        .message2{
            margin-top: 5px;
        }
        .message2 span{
            margin-right: 5px;

        }
        .message3{
            margin: 10px 0 0 0;
        }
        .middle{
            margin-top: 30px;
            width:100%;
            overflow: hidden;
            border-bottom: 1px solid #ff5b79;
        }
        .mid-content ul li{
            margin: 10px 0;
            input{
                margin: 0 5px;
            }
        }
        .sub button{
            width: 148px;
            height: 44px;
            background-color: #ff5371;
            border-radius: 4px;
            margin-top: 24px;
        }







    }
</style>